<template>
  <div class="body">
    <!-- <el-button @click="$router.go(0)" type="info" icon="el-icon-refresh-right"></el-button> -->
    <!-- <el-button type="success" icon="el-icon-plus">添加</el-button>
    <el-button type="primary" icon="el-icon-edit">编辑</el-button>
    <el-button type="danger" icon="el-icon-delete">删除</el-button>
    <el-button type="primary" icon="el-icon-upload2">导出</el-button> -->
       <el-row  class="mb8">
            <el-col :span="19">
                <el-button type="info" @click="shuaxin" icon="el-icon-refresh-right"></el-button>
                <!-- <el-button type="success" @click="handleAdd" icon="el-icon-plus">上传</el-button> -->
            </el-col>
            <el-col :span="5" class="seach">
                 <el-input v-model="params.keywords" placeholder="请输入文件名称"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="shuaxin"></el-button>
            </el-col>
        </el-row>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      class="table xinde"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" align="center" label="序号" @click="details" width="50"></el-table-column>
      <el-table-column prop="project_id" align="center" :show-overflow-tooltip="true"
               width="220" label="项目编号"></el-table-column>
      <el-table-column
        prop="project_name"
        align="center"
        label="采购项目名称"
       :show-overflow-tooltip="true"
               width="220"
      ></el-table-column>
      <el-table-column prop="procurement_method" :show-overflow-tooltip="true"
               width="220" align="center" label="采购方式"></el-table-column>
      <el-table-column prop="money" :show-overflow-tooltip="true"
               width="160" align="center" label="预算金额"></el-table-column>
      <el-table-column prop="package_number" :show-overflow-tooltip="true"
               width="220" align="center" label="包号"></el-table-column>
      <el-table-column fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="details(scope.row)" type="text" size="small">查看详情</el-button>
          <!-- <el-button type="text" size="small">申请</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,30]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <el-dialog :title="title" :visible.sync="open1" width="60%" append-to-body>
        <el-form ref="form" :disabled="true" :model="form" :rules="rules" label-width="130px">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="项目编号:">
                <el-input
                  v-model="formData.project_id"
                  placeholder="请输入项目编号:"
                  show-word-limit
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="130px" label="采购项目名称：" prop="project_name">
                <el-input
                  v-model="formData.project_name"
                  placeholder="请输入采购项目名称："
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="130px" label="采购方式：" prop="procurement_method">
                <el-input
                  v-model="formData.procurement_method"
                  placeholder="请输入采购方式："
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="130px" label="预算金额：" prop="money">
                <el-input
                  v-model="formData.money"
                  placeholder="请输入预算金额："
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="130px" label="包号：" prop="package_number">
                <el-input
                  v-model="formData.package_number"
                  placeholder="请输入包号："
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="130px" label="包名称：" prop="package_name">
                <el-input
                  v-model="formData.package_name"
                  placeholder="请输入包名称："
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label-width="130px" label="项目联系人：" prop="field118">
                <el-input
                  v-model="formData.field118"
                  placeholder="请输入项目联系人："
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="130px" label="项目联系方式：" prop="field119">
                <el-input
                  v-model="formData.field119"
                  placeholder="请输入项目联系方式："
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="bottom">
          <el-tabs type="border-card">
            <el-tab-pane>
              <span slot="label">采购需求</span>
              {{formData.purchase_demand}}
            </el-tab-pane>
            <el-tab-pane label="申请人资格需求">{{formData.qualification}}</el-tab-pane>
            <el-tab-pane label="时间地点">
              <p>开标时间:{{formData.bid_opening_time}}</p>
              <p>开标地点:{{formData.bid_opening_addr}}</p>
            </el-tab-pane>
            <el-tab-pane label="采购人资料">
              <el-row :gutter="15">
                <el-form
                  :disabled="true"
                  ref="elForm"
                  :model="formData"
                  :rules="rules"
                  size="medium"
                  label-width="100px"
                >
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购人名称：" prop="purchase_person_name">
                      <el-input
                        v-model="formData.purchase_person_name"
                        placeholder="请输入采购人名称："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购人地址:" prop="purchase_person_addr">
                      <el-input
                        v-model="formData.purchase_person_addr"
                        placeholder="请输入采购人地址:"
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购人联系人："
                      prop="purchase_person_contact_name"
                    >
                      <el-input
                        v-model="formData.purchase_person_contact_name"
                        placeholder="请输入采购人联系人："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购人联系方式："
                      prop="purchase_person_contact_mobile"
                    >
                      <el-input
                        v-model="formData.purchase_person_contact_mobile"
                        placeholder="请输入采购人联系方式："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购代理机构名称：" prop="purchase_agent_name">
                      <el-input
                        v-model="formData.purchase_agent_name"
                        placeholder="请输入采购代理机构名称："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购代理机构地址：" prop="purchase_agent_addr">
                      <el-input
                        v-model="formData.purchase_agent_addr"
                        placeholder="请输入采购代理机构地址："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购代理机构联系人："
                      prop="purchase_agent_person"
                    >
                      <el-input
                        v-model="formData.purchase_agent_person"
                        placeholder="请输入采购代理机构联系人："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购代理机构联系方式："
                      prop="purchase_agent_mobile"
                    >
                      <el-input
                        v-model="formData.purchase_agent_mobile"
                        placeholder="请输入采购代理机构联系方式："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { xunjia } from "@/api/purchase";
export default {
  data() {
    return {
      //获取页面列表
      params: {
        limit: 10,
        offset: 0,
        keywords: ""
      },
      total:null,
	  title:'',
	//   存放详情内容
	  form:{},
	  rules:[],
      //存放列表数据
      tableData: [],
      multipleSelection: [],
      // 存放详情内容
      formData: {},
      // 详情开关
      open1: false
    };
  },
  created() {
    this.getXunjia();
  },
  methods: {
    shuaxin(){
 this.getXunjia();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.limit = val;
      this.getXunjia();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.offset = parseInt(val - 1) * this.params.limit;
      this.getXunjia();
    },
    details(rows) {
         console.log(rows)
      var bbc=JSON.stringify(rows)
        this.$router.push({name:'ggxq',query:{params:bbc}});
      // this.open1 = true;
      // this.formData = rows;
    },
    getXunjia() {
      xunjia(this.params).then(res => {
        if (res.data.code == 1) {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total
        }
      });
    }
  }
};
</script>

<style scoped>
.body {
  /* width: 86vw;
  height: 91vh; */
}

.table {
  width: 100%;
  margin-top: 2vh;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
